<template>
	<view class="new">
		<!-- 图片 -->
		<view class="pic">
			<image :src="item.picurl" mode="aspectFit"></image>
		</view>
		<!-- 右边信息 -->
		<view class="newdata">
			<!-- 标题 -->
			<view class="title">
				{{item.title}}
			</view>
			<view class="title-r">
				<!-- 作者 -->
				<text class="act">作者:{{item.author}}</text>
				<!-- 浏览量 -->
				<text class="sel" v-if="!item.looktime">浏览量:{{item.hits}}</text>
				<!-- 浏览时间 -->
				<text class="sel" v-if="item.looktime">浏览时间:{{item.looktime}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "newsbox",
		props: {
			item: {
				type: Object,

			}
		},
		data() {
			return {

			}
		},
		created() {
			// this.getNewList()
			// console.log(this.item);
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.new {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// border: solid red;
		height: 250rpx;
		// width: 700rpx;

		.pic {

			// border: solid 1rpx green;
			width: 150rpx;
			height: 100rpx;
			margin-left: 15rpx;

			image {
				// display: block;

				width: 100%;
				height: 100%;
			}
		}

		.newdata {
			flex: 1;
			margin-left: 15rpx;
			// border: solid 1rpx blue;

			.title {
				//height: 200rpx;//高度不需要会出错溢出
				width: 550rpx; //需要宽度
				font-size: 36rpx;
				line-height: 85rpx;
				display: -webkit-box;
				/*弹性伸缩盒子模型显示*/
				-webkit-box-orient: vertical;
				/*排列方式*/
				-webkit-line-clamp: 2;
				/*显示文本行数*/
				overflow: hidden;
				/*溢出隐藏*/
				text-overflow: ellipsis; //省略号显示
			}

			.title-r {
				font-size: 26rpx;
				color: #999999;

				text {
					margin-right: 15rpx;

				}
			}
		}
	}
</style>